<template>
  <div id="Order-detail">
    <div style="display:flex;justify-content: space-between;">
      <h1>订单管理</h1>
      <el-button class="back-btn" type="primary" @click="toManage">
        <img style="width: 16px; height: 16px"
          src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E9%A6%96%E9%A1%B5/u384.png"
          alt="" />
        <span style="margin-left: 5px">返回</span>
      </el-button>
    </div>

    <el-card shadow="hover">
      <div class="stepsBox">
        <div :class="InformationData.orderStatus == '待支付' ? 'divCoa' : 'divCob'">
          提交订单
        </div>
        <div class="divCob">支付订单</div>
        <div :class="InformationData.orderStatus == '学习中' ? 'divCoa' : 'divCob'">学习课程</div>
        <div :class="InformationData.orderStatus == '未支付' ? 'divCoa' : 'divCob'">课程结束</div>
        <div :class="InformationData.orderStatus == '已结束' ? 'divCoa' : 'divCob'">完成评价</div>
      </div>
      <div v-for="item in stateData" :key="item.orderStatus">
        <div class="stateBox" v-if="InformationData.orderStatus == item.orderStatus">
          <img :src="item.srca" alt="">
          <div class="text" :style="item.color">订单状态：{{ item.name }}</div>
          <div class="buBox" v-for="i in item.butt" :key="i.title" @click="aadd(i.title)">
            <img :src="i.src" alt="">
            {{ i.title }}
          </div>
        </div>


      </div>
      <div class="informationBox">
        <div class="theTitle">
          <img
            src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u4112.png"
            alt="">
          基础信息:
        </div>
        <div class="content">
          <div>订单编号:{{ InformationData.orderNum }}</div>
          <div>订单状态：{{ InformationData.orderStatus }}</div>
          <div></div>
        </div>
        <div class="content">
          <div>下单时间:{{ InformationData.payTime }}</div>
          <div>付款时间：{{ InformationData.submitTime }}</div>
          <div></div>
        </div>
        <div class="content">
          <div>支付方式：{{ InformationData.payMethod }} </div>
          <div>赠送积分:{{ InformationData.integration }}</div>
          <div></div>
        </div>
      </div>
      <div class="informationBox">
        <div class="theTitle">
          <img
            src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u4112.png"
            alt="">
          买家信息：
        </div>
        <div class="content">
          <div>用户微信:{{ theSellerData.wechatName }} </div>
          <div>用户手机:{{ theSellerData.userPhone }}</div>
          <div>用户地区：{{ theSellerData.address }}</div>
        </div>
      </div>
      <div class="informationBox">
        <div class="theTitle">
          <img
            src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u4112.png"
            alt="">
          课程信息：
        </div>
        <div class="tableBox">
          <el-table :data="courseData" style="width: 824px" :header-cell-style="{
            background: '#9137f3',
            color: '#ffffff',
            height: '60px',
            'font-size': '14px', 'text-align': 'center',
          }">
            <el-table-column property="orderNum" label="课程" align="center" />
            <el-table-column property="courseName" label="课程名称" align="center" />
            <el-table-column property="courseUrl" label="列表图" align="center">
              <template #default="scope">
                <img :src="scope.row.courseUrl" style="width: 97px; height: 54px" />
              </template>
            </el-table-column>
            <el-table-column property="courseState" label="课程上架" align="center" />
            <el-table-column property="sales" label="报名费(元)" align="center" />
          </el-table>
        </div>

      </div>
      <div class="informationBox">
        <div class="theTitle">
          <img
            src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u4112.png"
            alt="">
          订单信息：
        </div>
        <div class="tableBox">
          <el-table :data="theOrderData" style="width: 824px" :header-cell-style="{
            background: '#9137f3',
            color: '#ffffff',
            height: '60px',
            'font-size': '14px', 'text-align': 'center',
          }">
            <el-table-column property="orderPrice" label="订单金额" align="center">
              <template #default="scope">
                <span>￥{{ scope.row.orderPrice }}</span>
              </template>
            </el-table-column>
            <el-table-column property="integration" label="优惠券" align="center">
              <template #default="scope">
                <span>-￥{{ scope.row.integration }}</span>
              </template>
            </el-table-column>
            <el-table-column property="ticket" label="积分优惠" align="center">
              <template #default="scope">
                <span>-￥{{ scope.row.ticket }}</span>
              </template>
            </el-table-column>
            <el-table-column property="lastPrice" label="实付金额" align="center">
              <template #default="scope">
                <span>￥{{ scope.row.lastPrice }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="informationBox">
        <div class="theTitle">
          <img
            src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u4112.png"
            alt="">
          订单操作记录：
        </div>
        <div class="tableBox">
          <el-table :data="operationData[0]" style="width: 824px" :header-cell-style="{
            background: '#9137f3',
            color: '#ffffff',
            height: '60px',
            'font-size': '14px', 'text-align': 'center',
          }">
            <el-table-column property="operatePerson" label="操作人" align="center" />
            <el-table-column property="operateTime" label="操作时间" align="center" />
            <el-table-column property="operateMsg" label="操作内容" align="center" />
            <el-table-column property="remark" label="备注" align="center" />
          </el-table>
        </div>
      </div>
      <el-dialog v-model="cancelTheOrder" :title="title" width="30%" center>
        <el-form :model="form">
          <el-form-item label="备注操作">
            <el-input v-model="form.remark" type="textarea" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancelTheOrder = false">取消</el-button>
            <el-button type="primary" @click="operationA">
              确定
            </el-button>
          </span>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup>
import {
  ElTableColumn,
  ElCard,
  ElInput,
  ElForm,
  ElFormItem,
  ElButton,
  ElTable,
  ElDialog,
  ElMessage
} from "element-plus";
import { ref, onMounted, reactive } from "vue"
import axios from '../utils/http';
import { useRouter, useRoute } from "vue-router";
const router = useRouter()
const route = useRoute()
let cancelTheOrder = ref(false)
let title = ref("")
const form = ref({ remark: "" });
let orderNum = route.query.orderNum
let InformationData = ref({})
const stateData = reactive([
  {
    orderStatus: "待支付",
    srca: "https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u4158.png",
    name: "课程已拍下，等待买家付款",
    color: "color:#ff9900",
    butt: [
      {
        src: "https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u4161.png",
        title: '取消订单'
      },
      {
        src: "https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u4165.png",
        title: '添加备注'
      },
    ]

  },
  {
    orderStatus: "未支付",
    srca: "https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%B7%B2%E5%AE%8C%E6%88%90/check_circle_u4400.png",
    name: "已完成",
    color: "color:#9137f3",
    butt: [
      {
        src: "https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u4165.png",
        title: '添加备注'
      }
    ]

  },
  {
    orderStatus: "学习中",
    srca: "https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%AD%A6%E4%B9%A0%E4%B8%AD/u4265.png",
    name: "学习中",
    color: "color:#00cc99",
    butt: [
      {
        src: "https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u4161.png",
        title: '取消订单'
      },
      {
        src: "https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%AD%A6%E4%B9%A0%E4%B8%AD/u4276.png",
        title: '结束课程'
      },
      {
        src: "https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u4165.png",
        title: '添加备注'
      },
    ]

  },
  {
    orderStatus: "已结束",
    srca: "https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%B7%B2%E5%85%B3%E9%97%AD/remove_circle_u4495.png",
    name: "已关闭",
    color: "color:#999999",
    butt: [
      {
        src: "https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%B7%B2%E5%85%B3%E9%97%AD/highlight_off_u4503.png",
        title: "删除订单"
      },
      {
        src: "https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u4165.png",
        title: '添加备注'
      }
    ]

  },
])
const orderOperation = {
  id: 0,
  //操作内容
  operateMsg: "",
  // 操作人
  operatePerson: "aa",
  //操作时间
  operateTime: "",
  // 订单编号
  orderId: "",
  //备注
  remark: ""
}
//时间
const toDub = n => n < 10 ? '0' + n : '' + n;
const toDate = (date) => {
  const oDate = new Date(date);
  return oDate.getFullYear() + '-' + toDub(oDate.getMonth() + 1) + '-' + toDub(oDate.getDate()) + ' ' + toDub(oDate.getHours()) + ':' + toDub(oDate.getMinutes()) + ':' + toDub(oDate.getSeconds());
};
//对话框
const aadd = (titleA) => {
  title.value = titleA
  orderOperation.operateMsg = titleA
  cancelTheOrder.value = true
  orderOperation.orderId = orderNum
  console.log('wew', orderOperation);
}
const toManage = function () {
  router.replace({
    name: "Order-management",
  })
}
const operationA = () => {
  orderOperation.remark = form.value.remark
  axios({
    url: "/operation/update",
    method: "post",
    data: {
      orderOperation
    }
  }).then((res) => {
    console.log('结果', res.data);
    if (res.data.code == 0) {
      form.value.remark = ""
      cancelTheOrder.value = false
      ElMessage({
        message: `${orderOperation.operateMsg}成功`,
        type: 'success',
      })
    }
  })

}
//基础信息接口
const Information = function () {
  axios({
    url: "/order/basicInfo/" + orderNum
  }).then((res) => {
    if (res.data.code == 0) {
      InformationData.value = res.data.data
    }
  })
}

//卖家信息
let theSellerData = ref({})
const theSeller = function () {
  axios({
    url: "/order/buyerInfo/" + orderNum
  }).then((res) => {
    if (res.data.code == 0) {
      theSellerData.value = res.data.data
    }
    console.log('卖家信息', theSellerData.value);
  })
}
//课程信息
let courseData = ref([])
const course = function () {
  axios({
    url: "/order/courseInfo/" + orderNum
  }).then((res) => {
    if (res.data.code == 0) {
      courseData.value.push(res.data.data)
    }
    console.log('课程', courseData.value);
  })
}
//订单信息
let theOrderData = ref([])
const theOrder = function () {
  axios({
    url: "/order/orderInfo/" + orderNum
  }).then((res) => {
    if (res.data.code == 0) {
      theOrderData.value.push(res.data.data)
    }
    console.log('订单信息', theOrderData.value);
  })
}
//订单操作信息
let operationData = ref([])
const operation = function () {
  axios({
    url: "/operation/queryAll/" + orderNum
  }).then((res) => {
    if (res.data.code == 0) {
      operationData.value.push(res.data.data)
    }
    console.log('订单操作信息', operationData.value);
  })
}
onMounted(() => {
  Information()
  theSeller()
  course()
  theOrder()
  operation()
})
</script>

<style lang="less" scoped>
#Order-detail {
  padding: 20px 70px;

  h1 {
    height: 50px;
    color: #9137f4;
  }

  .el-card {
    margin-bottom: 12px;

    .stepsBox {
      display: flex;
      font-size: 12px;

      .divCoa {
        width: 150px;
        height: 36px;
        line-height: 36px;
        color: #fff;
        text-align: center;
        background-image: url('https://cloud.axureshop.com/gsc/IKB8GL/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u4168_selected.png?token=b03768d296c4da30b84ab1179301806b23a1a60e55624b29104fdd23e2f44ea3');
      }

      .divCob {
        width: 150px;
        height: 36px;
        line-height: 36px;
        color: #999;
        text-align: center;
        background-image: url(https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u4169.png);
      }
    }

    .stateBox {
      display: flex;
      margin: 20px 0;
      font-size: 14px;
      align-items: center;

      img {
        width: 24px;
        height: 24px;
      }

      .text {
        margin: 0 10px;
        font-weight: 700;
        font-style: normal;
        color: rgb(255, 153, 0);
      }

      .buBox {
        margin: 0 10px;
        width: 92px;
        height: 32px;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(145, 55, 243, 1);
        border-radius: 3px;
        color: #9137F3;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 15px;
          height: 15px;
        }
      }
    }

    .informationBox {
      margin-bottom: 20px;

      .theTitle {
        display: flex;
        align-items: center;
        font-weight: 700;
        font-style: normal;
        font-size: 16px;

        img {
          width: 5px;
          height: 18px;
        }
      }

      .content {
        display: flex;
        margin: 10px 0;

        div {
          font-size: 14px;
          font-weight: 700;
          font-style: normal;
          color: rgb(153, 153, 153);
          width: 264px;
        }
      }
    }

    .tableBox {
      margin: 20px 0;
    }
  }

  .back-btn {
    background-color: #fcfcfc;
    border: 1px solid #9137f3;
    color: #9137f3;
  }
}
</style>